<template>
	<view class="imgBoxShow" v-if="imgArr.length>0">
		<uni-grid :column="3" :highlight="true">
			<uni-grid-item v-for="(item, index) in imgArr" :index="index" :key="index">
				<!-- #ifndef APP-NVUE -->
				<view class="picItem flex alignCenter">
					<image :lazy-load="true" :src="item" mode="widthFix" class="pic"></image>
					<view class="picLayer flex alignCenter justConAround">
						<uni-icons v-if="canDel" class="delIcon" color="#fff" type="trash" size="26" @click="delPic(index)"></uni-icons>
						<uni-icons class="bigIcon" color="#fff" type="search" size="26" @click="showBigPic(index)"></uni-icons>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				<view class="picItem flex alignCenter" :style="{'height':(screenWidth-30)/3+'px'}">
					<image :lazy-load="true" :src="item" mode="center" class="pic"></image>
					<!-- <image :lazy-load="true" :src="item" :style="{'width':(screenWidth-30)/3+'px'}" mode="aspectFit" class="pic"></image> -->
					<view class="picLayer flex alignCenter justConAround" :style="{'width':(screenWidth-30)/3+'px','height':(screenWidth-30)/3+'px'}">
						<uni-icons v-if="canDel" class="delIcon" color="#fff" type="trash" size="26" @click="delPic(index)"></uni-icons>
						<uni-icons class="bigIcon" color="#fff" type="search" size="26" @click="showBigPic(index)" :style="{'left':((screenWidth-30)/3)/2-13+'px','top':((screenWidth-30)/3)/2-13+'px'}"></uni-icons>
					</view>
				</view>
				<!-- #endif -->
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>
	import { previewImg } from "@/utils/common.js"
	export default {
		name:"uni-imgbox",
		props:{
			imgArr:{
				type:Array,
				default:[]
			},
			// 是否显示删除icon
			canDel:{
				type:Boolean,
				default:true
			}
		},
		watch:{
			imgArr: {
			    handler(newValue, oldValue) {
			        console.log("监听",newValue);
					this.imgArrAll=newValue
			    },
			    deep: true,
			    immediate: true
			}
		},
		data() {
			return {
				screenWidth:0,
				screenHeight:0,
				imgArrAll:[],
			};
		},
		created() {
			this.screenWidth=uni.getStorageSync('systemInfo').screenWidth
			this.screenHeight=uni.getStorageSync('systemInfo').screenHeight
		},
		methods:{
			// 删除图片
			delPic(idx){
				uni.showModal({
					title: '提示',
					content: '确定要删除该图片？',
					success:(res)=> {
						if (res.confirm) {
							this.imgArrAll.splice(idx,1)
						} else if (res.cancel) {}
					}
				});
			},
			// 预览图片
			showBigPic(idx){
				previewImg(this.imgArrAll,idx)
			},
		}
	}
</script>

<style lang="scss" scoped>
.imgBoxShow{
	.picItem{
		position: relative;
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex-direction:row;
		/* #endif */
		overflow: hidden;
	}
	.pic{
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		/* #endif */
	}
	.picLayer{
		position: absolute;
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .3);
		color:#fff;
		padding: 0 40rpx;
		box-sizing: border-box;
		/* #ifdef APP-NVUE */
		flex-direction: row;
		.bigIcon{
			position: absolute;
		}
		/* #endif */
		
	}
}
</style>